<!DOCTYPE html>
<html>
  <head>
    <title>s01.html</title>

    <meta name="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    	#d1{
    		width: 200px;
    		height: 200px;
    		background-color: #fff0dc;
    		font-size: 20px;
    	}
    </style>
	<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
		/*之前的做法:原始方式*/
		function f1(){
			var obj=document.getElementById('a1');
			alert(obj.innerHTML);
		}
		
		/*以后的做法：jquery方式*/
		function f2(){
			//将原始的DOM对象封装成一个JQuery对象
			var obj=$('#a1');
			//DOM对象的obj.innerHTML不能使用了。
			//要使用jQuery对象提供的方法或者属性。
			alert(obj.html());
		}
		
		function f4(){
			$('#d1').css('font-size','60px')
					.css('font-style','italic');
		}
	</script>
  </head>
  
  <body>
    <!-- jquery简单案例 -->
    <a id="a1" href="javascript:;" onclick="f1();" >hello jQuery1</a>
    <a id="a1" href="javascript:;" onclick="f2();" >hello jQuery2</a>
    <a id="a1" href="javascript:;" onclick="f4();" >hello jQuery4</a>
    <div id="d1">write less,do more</div>
  </body>
</html>
